<template>
    <navigator 
		class="container" 
		url="/pages/index/index"
		hover-class="none"
	>
        <view class="container__header">
            <image class="container__header-image" src="../../static/logo.png"></image>
        </view>
        <view class="container__nickname">
            醉解心语
        </view>
        <view class="container__edit">
            <text class="iconfont icon-bianji"></text>
        </view>
    </navigator>
</template>

<style lang="scss" scoped>
    .container{
		position: relative;
        display:flex;
		align-items: center;
        padding:0 $cool-components-padding-lr;
        box-sizing: border-box;
        height:160rpx;
        background-color:#ffffff;
		&__header{
			width: 120rpx;
			height: 120rpx;
			border: 4rpx solid $cool-color-primary;
			box-sizing: border-box;
			border-radius: 60rpx;
			background-color: #f8f8f8;
			&-image{
				width: 100%;
				height: 100%;
				border-radius: 60rpx;
			}
		}
		&__nickname{
			width: 400rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			margin-left: 25rpx;
			font-size: $cool-font-size-title;
			color: $cool-font-color-primary;
		}
		&__edit{
			position: absolute;
			right: 30rpx;
			top:50%;
			transform: translateY(-50%);
		}
    }
	.iconfont{
		color: $cool-icon-color-primary;
		font-size: $cool-icon-size-primary;
	}
</style>